<template>
  <div id="container">
    <el-row :gutter="50">
      <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
        <div id="blogListArea">
          <el-timeline>
            <el-timeline-item v-for="(item) in listItems" :key="item.id" :timestamp="item['created_at']" placement="top">
              <router-link :to="{ name:'blogDetail', params: {articleId: item.id} }">
                <BoxCard :item-info="item" />
              </router-link>
            </el-timeline-item>
          </el-timeline>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="0" :sm="8" :md="8" :lg="8" :xl="8" />
    </el-row>
  </div>
</template>

<script>
import BoxCard from '@/views/home/components/BoxCard'
import { fetchList } from '@/api/article'

export default {
  name: 'Home',
  components: {
    BoxCard
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 5,
      listItems: []
    }
  },
  created() {
    fetchList(this.currentPage, this.pageSize).then(res => {
      this.listItems = res.data['list']
      this.total = res.data['cnt']
      console.log(res)
    })
  },
  methods: {
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.updateListItems()
    },
    updateListItems() {
      fetchList(this.currentPage, this.pageSize).then(res => {
        this.listItems = res.data['list']
        this.total = res.data['cnt']
      })
    }
  }
}
</script>

<style scoped>
#statistics > div {
  display: flex;
  justify-content: center;
  flex: 1;
  border-top: 1px solid black;
}

#container {
  margin: 0 auto;
  padding-top: 1rem;
  width: 80%;
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>
